<template>
	<!--截图工具-->
	<div class="ws-crop-container" v-if="show">
		<div class="image-side">
			<vueCropper ref="wsCropper" :img="img" :outputSize="pconfig.size" :outputType="pconfig.outputType" :info="pconfig.info" :canScale="pconfig.canScale" :autoCrop="pconfig.autoCrop" :autoCropWidth="pconfig.autoCropWidth" :autoCropHeight="pconfig.autoCropHeight" :fixed="pconfig.fixed" :fixedNumber="pconfig.fixedNumber"></vueCropper>
		</div>
		<div class="info-side">
			<div class="title-info">
				<div class="title-info-text">请注意截图比例</div>
				<div class="title-info-btn">
					<Button type="primary" @click="ok">OK</Button>
					<Button @click="cancel">Cancel</Button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import vueCropper from 'vue-cropper';
	export default {
		components: {
			vueCropper
		},
		props: {
			value: {
				required: true,
				default: null
			},
			img: {
				required: true,
			},
			config: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				show: false, //是否显示
				pconfig: Object.assign(this.config, {
					info: true,
					size: 1,
					outputType: 'jpeg',
					canScale: true,
					autoCrop: true,
					// 开启宽度和高度比例
					fixed: true
				})
			}
		},
		watch: {
			value(val) {
				this.show = val;
			},
			show(val) {
				this.$emit('input', val);
			}
		},
		mounted() {},
		methods: {
			cancel() {
				this.show = false;
			},
			ok() {
				let _this = this;
				// 获取截图的base64 数据
				this.$refs.wsCropper.getCropData((data) => {
				  // do something
					_this.$emit('crop-ok', {
						action: _this.pconfig.action,
						data: data
					});
					_this.cancel();
				})
				//获取截图信息
				// 获取截图的blob数据
//				this.$refs.wsCropper.getCropBlob((data) => {
//					// do something
//					console.log(data)
//					_this.$emit('crop-ok', data);
//				})
			}
		}
	}
</script>

<style lang="less">
	.ws-crop-container {
		z-index: 1900;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .9);
		color: #f1f1f1;
		.info-side {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 40px;
			padding-left: 10px;
			padding-right: 10px;
			background: #fefefe;
			color: #777;
			.title-info {
				height: 40px;
				line-height: 40px;
				.title-info-text {
					margin-left: 20px;
					float: left;
					width: 70%;
					color: red;
				}
				.title-info-btn {
					float: right;
				}
			}
		}
		.image-side {
			overflow: hidden;
			position: absolute;
			right: 30px;
			left: 30px;
			top: 70px;
			bottom: 40px;
			text-align: center;
		}
	}
</style>